/**
 * 目标1：渲染图书列表
 *  1.1 获取数据
 *  1.2 渲染数据
 */
const creator = '老张'
//封装 -- 获取并渲染图书列表函数
function getBooksList() {
  //1.1 获取数据
  axios({
    url: 'http://hmajax.itheima.net/api/books',
    params: {
      //外号： 获取对应数据
      creator
    }
  }).then(result => {
    // console.log(result)
    const bookList = result.data.data
    // console.log(bookList)
    
    //1.2 渲染数据
    const htmlStr = bookList.map((item,index) => {
      return `
        <tr>
            <td>${index + 1}</td>
            <td>${item.bookname}</td>
            <td>${item.author}</td>
            <td>${item.publisher}</td>
            <td data-id = ${item.id}>
              <span class="del">删除</span>
              <span class="edit">编辑</span>
            </td>
        </tr>`
    })
    // console.log(htmlStr.join(''))
    document.querySelector('.list').innerHTML = htmlStr.join('')
    
  })
}
// 网页加载运行后，获取并渲染一次
getBooksList()

/**
 * 目标2：新增图书
 *  2.1 新增弹框->显示和隐藏
 *  2.2 收集表单数据，并提交到服务器保存
 *  2.3 刷新图书列表
 */
//2.1 创建对象
const addModalDOM = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDOM)
//给保存按钮--> 点击事件--隐藏弹框
document.querySelector('.add-btn').addEventListener('click', () => {
  const addForm = document.querySelector('.add-form')
  const bookObj = serialize(addForm, {hash:true, empty: true})
  // console.log(bookObj)
  //提交到服务器
  axios({
    url:'http://hmajax.itheima.net/api/books',
    method: 'post',
    data: {
      //展开运算符
      ...bookObj,
      creator
    }
  }).then(result => {
    // console.log(result)
    //添加成功后，渲染到页面上
    getBooksList()
    //清空表单
    addForm.reset()
    //隐藏弹框
    addModal.hide()
  })
})


/**
 * 目标3：删除图书
 *  3.1 删除元素绑定点击事件->获取图书id
 *  3.3 刷新图书列表
 */

//1.给删除按钮添加点击事件 
// 动态创建的 要加事件委托
document.querySelector('.list').addEventListener('click', e => {
  //获取触发事件的目标元素
  // console.log(e.target)
  //判断点击的是删除
  if (e.target.classList.contains('del')) {
    // console.log('点击删除元素')
    //获取图书id（自定义属性id)
    const theId = e.target.parentNode.dataset.id
    // console.log(theId)
    //调用删除接口
    axios({
      url: `http://hmajax.itheima.net/api/books/${theId}`,
      method: 'delete'
    }).then(result => {
      // console.log(result.data.message)
      alert(result.data.message)
      //刷新列表
      getBooksList()  
    })
  }
})


/**
 * 目标4：编辑图书
 *  4.1 编辑弹框->显示和隐藏
 *  4.2 获取当前编辑图书数据->回显到编辑表单中
 *  4.3 提交保存修改，并刷新列表
 */

//4.1 编辑弹框->显示和隐藏
const editDom = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(editDom)
//编辑元素绑定点击事件
document.querySelector('.list').addEventListener('click', e => {
  // console.log(e.target)
  if (e.target.classList.contains('edit')) {
    // console.log('编辑')
    // 4.2 获取当前编辑图书数据->回显到编辑表单中
    const theId = e.target.parentNode.dataset.id
    axios({
      url: `http://hmajax.itheima.net/api/books/${theId}`
    }).then(result => {
      // console.log(result.data.data)
      const bookObj = result.data.data
      // document.querySelector('.edit-form .bookname').value = bookObj.bookname
      // document.querySelector('.edit-form .author').value = bookObj.author
      // document.querySelector('.edit-form .publisher').value = bookObj.publisher

      //数据对象‘属性’和‘标签名’一致
      //遍历数据对象，使用属性去获取对应标签
      const keys = Object.keys(bookObj)
      // console.log(keys) //['id', 'bookname', 'author', 'publisher']
      keys.forEach(key => {
        document.querySelector(`.edit-form .${key}`).value = bookObj[key]
      })
      
    })
    editModal.show()
  }
  
})

//点击修改 ---隐藏弹框
document.querySelector('.edit-btn').addEventListener('click', () => {
  // 4.3 提交保存修改，并刷新列表
  const editForm = document.querySelector('.edit-form')
  const { id, bookname, author, publisher} = serialize(editForm, {hash: true, empty: true})
  axios({
    url: `http://hmajax.itheima.net/api/books/${id}`,
    method: 'put',
    data: {
      bookname,
      author,
      publisher
    }
  }).then(result => {
    // console.log(result)
    // alert(result.data.message)
    //刷新列表
    getBooksList()
    editModal.hide()

  })
  


})